<template>
	<view class="input-group">
		<view class="navs uniBtn2">
			<view class="name">手机号<text style="color: red;">*</text>：</view>
			<input :placeholder="placeholder" @input="search" v-model="phone" placeholder-class="pcs2" type="number" />
		</view>
		<view class="ul">
			<view class="li" v-for="(item,index) in list" :key="index" @tap="select(item)">{{item.name}}=>{{item.phone}}</view>
			<view class="li2" @tap="select2" v-if="list.length != 0">取消</view>
		</view>
	</view>
</template>

<script>
	import {
		search_phone
	} from '@/request/api.js';
	export default {
		props: {
			placeholder: String, //默认提示
			searchKey: String, //模糊搜索的key值
		},
		data() {
			return {
				dataSource:[],
				list: [],
				phone:''
			};
		},
		destroyed() {
			clearTimeout(this.t);
		},
		methods: {
			search(e) {
				let val = e.detail.value;
				let dataSource = [];
				let arr = [];
				if (!val) {
					this.list = [];
				} else {
					search_phone({
						phone: val
					}).then(res => {
						dataSource = res.data;
						for (let i = 0; i < dataSource.length; i++) {
							if (dataSource[i].phone.indexOf(val) !== -1) {
								arr.push(dataSource[i]);
							}
						}
						this.list = arr;
					})
				}
			},
			select(item) {
				this.list = [];
				this.phone = item.phone;
				this.$emit('select', item);
			},
			select2(){
				let item = {
					id:'',
					name:'',
					phone:''
				}
				this.list = [];
				this.phone = '';
				this.$emit('select', item);
			}
		}
	}
</script>


<style lang="scss">
	.input-group {
		position: relative;
		
		.navs{
			.name {
				width: 140upx;
				flex-shrink: 0;
				white-space: nowrap;
				color: #414141;
			}
			
			input {
				flex: 1;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: bold;
				color: #414141;
				text-align: right;
			}
		}
		
		.ul {
			position: absolute;
			left: 0;
			top: 100%;
			width: 100%;
			background: #eaeaea;
			z-index: 999;
			font-weight: bold;
			
			.li {
				border-bottom: 1upx solid gray;
				line-height: 90upx;
				padding-left: 20rpx;
			}
			.li2{
				line-height: 90upx;
				text-align: center;
				color: #F86C53;
				font-size: 30rpx;
			}
		}
	}
</style>